<template>
  <div class="login-container dark:bg-gray-900">
    <!-- 背景装饰 -->
    <div class="background-decoration">
      <div class="shape shape-1"></div>
      <div class="shape shape-2"></div>
      <div class="shape shape-3"></div>
    </div>

    <!-- 主要内容 -->
    <div class="login-content">
      <!-- 左侧品牌区域 -->
      <div class="brand-section">
        <div class="brand-logo">
          <div class="logo-icon">📝</div>
          <h1 class="brand-name dark:text-white">博客管理系统</h1>
        </div>
        <div class="brand-description">
          <p class="dark:text-gray-300">专业的内容管理平台</p>
          <p class="dark:text-gray-300">让创作更简单，让管理更高效</p>
        </div>
        <div class="feature-list">
          <div class="feature-item">
            <el-icon><Check /></el-icon>
            <span class="dark:text-gray-300">强大的文章编辑器</span>
          </div>
          <div class="feature-item">
            <el-icon><Check /></el-icon>
            <span class="dark:text-gray-300">智能分类管理</span>
          </div>
          <div class="feature-item">
            <el-icon><Check /></el-icon>
            <span class="dark:text-gray-300">实时数据统计</span>
          </div>
        </div>
      </div>

      <!-- 右侧登录表单 -->
      <div class="form-section">
        <div class="login-card dark:bg-gray-800 dark:border-gray-700">
          <div class="card-header">
            <h2 class="welcome-title dark:text-white">欢迎回来</h2>
            <p class="welcome-subtitle dark:text-gray-300">请登录您的管理员账户</p>
          </div>

          <el-form
            ref="loginFormRef"
            :model="loginForm"
            :rules="rules"
            @submit.prevent="handleLogin"
            class="login-form"
            size="large"
          >
            <el-form-item prop="username">
              <el-input
                v-model="loginForm.username"
                placeholder="用户名"
                class="custom-input"
              >
                <template #prefix>
                  <el-icon class="input-icon"><User /></el-icon>
                </template>
              </el-input>
            </el-form-item>

            <el-form-item prop="password">
              <el-input
                v-model="loginForm.password"
                type="password"
                placeholder="密码"
                show-password
                class="custom-input"
              >
                <template #prefix>
                  <el-icon class="input-icon"><Lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>

            <div class="form-options">
              <el-checkbox v-model="loginForm.remember">
                记住我
              </el-checkbox>
              <a href="#" class="forgot-link dark:text-blue-400 dark:hover:text-blue-300">忘记密码？</a>
            </div>

            <el-button
              type="primary"
              native-type="submit"
              :loading="loading"
              class="login-button"
            >
              {{ loading ? '登录中...' : '登录' }}
            </el-button>


          </el-form>

          <div class="card-footer">
            <p class="dark:text-gray-300">还没有账户？ <a href="#" class="register-link dark:text-blue-400 dark:hover:text-blue-300">联系管理员</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { User, Lock, Check, UserFilled } from '@element-plus/icons-vue'
import type { FormInstance } from 'element-plus'

// 禁用默认布局
definePageMeta({
  layout: false
})

// 使用认证组合式函数
const { login, isLoggedIn } = useAuth()

// 表单引用
const loginFormRef = ref<FormInstance>()

// 表单数据
const loginForm = ref({
  username: '',
  password: '',
  remember: false
})

// 加载状态
const loading = ref(false)

// 表单验证规则
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, message: '用户名长度不能少于3位', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
  ]
}

// 登录处理
const handleLogin = async () => {
  if (!loginFormRef.value) return
  
  try {
    // 验证表单
    const valid = await loginFormRef.value.validate()
    if (!valid) return

    loading.value = true
    
    // 调用登录API
    const result = await login({
      username: loginForm.value.username,
      password: loginForm.value.password
    })
    
    if (result.success) {
      ElMessage.success(result.message)
      
      // 跳转到管理后台
      await navigateTo('/admin')
    } else {
      ElMessage.error(result.message)
    }
  } catch (error) {
    console.error('登录错误:', error)
    ElMessage.error('登录失败，请重试！')
  } finally {
    loading.value = false
  }
}



// 如果已登录，重定向到管理后台
onMounted(() => {
  if (isLoggedIn.value) {
    navigateTo('/admin')
  }
})

// 页面元数据
useHead({
  title: '管理员登录 - 博客管理系统'
})
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;
}

.background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.shape-1 {
  width: 200px;
  height: 200px;
  top: -100px;
  right: -50px;
  animation: float 6s ease-in-out infinite;
}

.shape-2 {
  width: 150px;
  height: 150px;
  bottom: -75px;
  left: 10%;
  animation: float 8s ease-in-out infinite reverse;
}

.shape-3 {
  width: 100px;
  height: 100px;
  top: 20%;
  left: 5%;
  animation: float 5s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}

.login-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1200px;
  width: 100%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  margin: 20px;
}

.brand-section {
  padding: 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.brand-logo {
  text-align: center;
  margin-bottom: 40px;
}

.logo-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.brand-name {
  font-size: 32px;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(45deg, #fff, #e3f2fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.brand-description {
  text-align: center;
  margin-bottom: 40px;
  opacity: 0.9;
}

.brand-description p {
  margin: 8px 0;
  font-size: 16px;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.feature-item .el-icon {
  color: #52c41a;
}

.form-section {
  padding: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  width: 100%;
  max-width: 400px;
}

.card-header {
  text-align: center;
  margin-bottom: 40px;
}

.welcome-title {
  font-size: 28px;
  font-weight: 600;
  color: #262626;
  margin: 0 0 8px 0;
}

.welcome-subtitle {
  color: #8c8c8c;
  margin: 0;
  font-size: 14px;
}

.login-form {
  width: 100%;
}

.custom-input {
  width: 100%;
}

.custom-input :deep(.el-input__wrapper) {
  border-radius: 12px;
  padding: 12px 16px;
  border: 2px solid #f0f0f0;
  transition: all 0.3s ease;
}

.custom-input :deep(.el-input__wrapper:hover),
.custom-input :deep(.el-input__wrapper.is-focus) {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.input-icon {
  color: #8c8c8c;
  font-size: 18px;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.forgot-link {
  color: #667eea;
  text-decoration: none;
  font-size: 14px;
}

.forgot-link:hover {
  text-decoration: underline;
}

.login-button {
  width: 100%;
  height: 48px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  transition: all 0.3s ease;
}

.login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

.divider {
  position: relative;
  text-align: center;
  margin: 24px 0;
  color: #8c8c8c;
  font-size: 14px;
}

.divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: #f0f0f0;
}

.divider span {
  background: white;
  padding: 0 16px;
  position: relative;
  z-index: 1;
}

.social-login {
  display: flex;
  justify-content: center;
}

.social-button {
  width: 100%;
  border: 2px solid #f0f0f0;
  border-radius: 12px;
  height: 48px;
  color: #666;
  background: white;
  transition: all 0.3s ease;
}

.social-button:hover {
  border-color: #667eea;
  color: #667eea;
  transform: translateY(-1px);
}

.card-footer {
  text-align: center;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #f0f0f0;
  color: #8c8c8c;
  font-size: 14px;
}

.register-link {
  color: #667eea;
  text-decoration: none;
  font-weight: 500;
}

.register-link:hover {
  text-decoration: underline;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .login-content {
    grid-template-columns: 1fr;
    max-width: 500px;
  }
  
  .brand-section {
    display: none;
  }
  
  .form-section {
    padding: 40px;
  }
}

@media (max-width: 480px) {
  .login-content {
    margin: 16px;
    border-radius: 16px;
  }
  
  .form-section {
    padding: 32px 24px;
  }
  
  .card-header {
    margin-bottom: 32px;
  }
  
  .welcome-title {
    font-size: 24px;
  }
}

/* 暗色模式支持 */
.dark .form-section {
  background: #1f2937;
}
  
.dark .welcome-title {
  color: #ffffff;
}
  
.dark .welcome-subtitle {
  color: #d1d5db;
}
  
.dark .custom-input :deep(.el-input__wrapper) {
  background: #374151;
  border-color: #4b5563;
  color: #ffffff;
}

.dark .custom-input :deep(.el-input__inner) {
  color: #ffffff;
}

.dark .custom-input :deep(.el-input__inner::placeholder) {
  color: #9ca3af;
}

.dark .card-footer {
  border-color: #4b5563;
  color: #d1d5db;
}

.dark .login-card {
  background-color: #1f2937;
  border-color: #4b5563;
}

.dark .input-icon {
  color: #9ca3af;
}
</style>